<template>
  <div id="container" :data="data">
    <chartTitle :title="title"></chartTitle>
    <div class="listBox">
      <div class="topBox">
        <p>告警总数：<span>{{total?total:0}}</span></p>
        <p class="btn" @click="onMore">更多></p>
      </div>
      <div class="contentBox" :key="index" v-for="(item, index) in data">
        <img v-if="item.portraitInformation2 == null" class="tImg" src="./img/head.png" alt="" />
        <img v-else class="tImg" :src="'data:image/png;base64,' + item.portraitInformation2" alt="" />
        <div class="textItem">
          <p class="p1">
            <span class="s1">{{ item.name }}</span> <span class="s2">{{item.alarmType}}</span>
          </p>
          <p class="p2"><span>告警时间：</span><span>{{item.alarmTime}}</span></p>
          <p class="p2"><span>告警位置：</span><span>{{item.alarmLocation}}</span></p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import chartTitle from '../chart-title/index.vue'
export default {
  components: {
    chartTitle
  },
  name: 'itemBox',
  props: {
    title: String,
    total: [Number, String],
    data: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  methods: {
    onMore() {
      let path = '/xlgc/alarmCenter/personAlarm/personList', query={}
      this.$router.push({ path: path, query })
    }
  }
}
</script>

<style lang="less" scoped>
#container {
  width: 100%;
  height: 20.4vh;
  color: #fff;
  background-color: rgba(7, 38, 46, 0.2);
  // border: 1px solid rgba(194, 215, 253, .2);
  margin-top: 2vh;
  .listBox {
    margin-top: 2vh;
    height: 80vh;
    padding: 2vh 4vh;
    background-image: url(../../image/index/listBg.png);
    background-size: 100% 100%;
    .topBox {
      position: relative;
      padding-bottom: 1vh;
      border-bottom: 1px solid #14306b;
      p {
        font-size: 1.5vh;
        margin: 0;
        span {
          color: #5ed0ff;
          font-weight: bold;
          font-size: 2vh;
        }
      }
      .btn {
        font-size: 1.5vh;
        cursor: pointer;
        position: absolute;
        right: 0;
        top: -0.5vh;
        padding: 1vh 2vh;
        background-image: url(../../image/index/btnBg.png);
        background-size: 100% 100%;
      }
    }
    .contentBox {
      margin-top: 1.5vh;
      position: relative;
      display: flex;
      border-bottom: 1px dotted #ccc;
      padding-bottom: 1.5vh;
      .tImg {
        width: 8vh;
        height: 8vh;
        border-radius: 15px;
      }
      .textItem {
        // margin-top: 1vh;
        margin-left: 2vh;
        p {
          margin-bottom: 0.2vh;
        }
        .p1 {
          margin-bottom: 0.5vh;
          .s1 {
            font-size: 1.8vh;
            font-weight: bold;
          }
          .s2 {
            color: #ff143b;
            font-size: 1vh;
            margin-left: 2vh;
          }
        }
        .p2 {
          font-size: 1vh;
          span {
            font-size: 1vh;
          }
        }
      }
    }
  }
}
</style>
